/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from "react";
import { Table, Select, Space, Modal, Input, message } from "antd";
import { accountCate } from "../../config/enums";
import { connect } from "react-redux";
class Withdrawal extends Component {
  state = {
    selectState: 0,
    orders: [],
    modalText: null,
    showModal: false,
    selectItem: null,
    loading: false,
  };
  inputValue = "";
  onSearchPhone = (e) => {
    this.setState({
      selectPhone: e,
    });
    this.getOrders();
  };
  getOrders = async () => {
    const res = await this.http("PayRecord/Spec", {
      Cate: 5,
      IsChecked: true,
    });
    this.setState({
      orders: res.data.dtos,
    });
  };
  componentDidMount() {
    this.getOrders();
  }
  columns = [
    {
      title: "订单时间",
      dataIndex: "date",
      render: (e) => <div>{this.$dayjs(e).format("YYYY-MM-DD HH:mm:ss")}</div>,
    },
    {
      title: "账户类型",
      dataIndex: "accountCate",
      render: (e) => <div>{accountCate[e]}</div>,
    },
    {
      title: "用户名称",
      dataIndex: "userName",
    },
    {
      title: "用户手机号",
      dataIndex: "phone",
    },
    {
      title: "用户提币地址",
      dataIndex: "file",
    },
    {
      title: "提现金额",
      dataIndex: "cost",
    },
    {
      title: "操作",
      dataIndex: "",
      key: "x",
      render: (e) => (
        <Space size="middle">
          <a onClick={() => this.successClick(e)}>通过</a>
          {/* <a onClick={() => this.failClick(e)}>驳回</a> */}
        </Space>
      ),
    },
  ];
  closeModel = () => {
    this.setState({
      showModal: false,
    });
  };
  successClick = (e) => {
    this.setState({
      showModal: true,
      modalText: "确认通过吗？",
      selectItem: e,
    });
  };
  failClick = (e) => {
    this.setState({
      showModal: true,
      modalText: "确认驳回吗？",
      selectItem: e,
    });
  };
  inputReason = (e) => {
    this.inputValue = e.target.value;
  };
  handleOk = async () => {
    this.setState({
      loading: true,
    });
    // let remark = null,
    //   state = 4;
    // if (this.state.modalText === "确认驳回吗？") {
    //   remark = this.inputValue;
    //   state = 6;
    // }
    console.log(
      {
        id: this.state.selectItem.id,
        userId: this.state.selectItem.userId,
        adminId: this.props.userInfo.id,
      },
      this.props.userInfo
    );
    await this.http(
      "PayRecord/Check",
      {
        id: this.state.selectItem.id,
        userId: this.state.selectItem.userId,
        adminId: this.props.userInfo.id,
      },
      "POST"
    )
      .then(() => {
        message.success("操作成功！");
        this.getOrders();
      })
      .finally(() => {
        this.setState({
          showModal: false,
          loading: false,
        });
      });
  };
  modalContent = () => {
    if (this.state.modalText === "确认驳回吗？") {
      return <Input placeholder="驳回理由" onChange={this.inputReason}></Input>;
    }
  };
  render() {
    return (
      <div>
        <div className="header" style={{ margin: "20px" }}>
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="按用户手机号查找"
            optionFilterProp="children"
            onSearch={this.onSearchPhone}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          ></Select>
          <Modal
            confirmLoading={this.state.loading}
            title=""
            onCancel={this.closeModel}
            onOk={this.handleOk}
            visible={this.state.showModal}
          >
            <div>
              {this.state.modalText}
              <div>{this.modalContent()}</div>
            </div>
          </Modal>
        </div>
        <Table
          rowKey={(data) => data.id}
          columns={this.columns}
          dataSource={this.state.orders}
        />
      </div>
    );
  }
}
export default connect((state) => ({ userInfo: state.user }), {})(Withdrawal);
